<template>
  <div class="box-wrap">
    <div class="box b1" @click="onMouse"></div>
    <div class="box b2" @click="onMouse"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
    },
    onMouse(e) {
      console.log(e)
    }
  },
  mounted() {
    console.log(`helloworld`)
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  &-wrap {
    transform-style: preserve-3d;
  }
  &.b1 {
    transform: translate3d(0, 50px, 2px);
    background: red;
  }
  &.b2 {
    transform: translatez(1px);
    background: blue;
  }
}
</style>
